<svg viewBox='0 0 800 320' class='fm-chart'>
  <style type='text/css'>
  <![CDATA[
  .fm-chart text, .fm-tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font: 10px sans-serif;
  }

  .fm-chart .axis .stroke {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .tick {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .label, .axis .title {
    fill: #666;
  }

  .fm-chart .axis .label {
    font-size: 10px;
  }

  .fm-chart .axis .title {
    font-size: 10px;
  }

  .fm-chart .chart-title {
    font-size: 12px;
    font-weight: bold;
  }

  .fm-chart .chart-subtitle {
    font-size: 10px;
  }

  .fm-chart text.label {
    fill: #666;
  }

  .fm-chart .legend text {
    font-size: 10px;
    fill: #333;
  }

  .fm-chart .legend text.title {
    fill: #666;
  }

  .fm-chart .line {
    fill: none;
    stroke: #000;
  }

  .fm-chart .area {
    opacity: 0.8;
  }

  .fm-chart .grid .gridline {
    stroke: #ddd;
    stroke-width: 0.02em;
  }

  .fm-chart .bar,
  .fm-chart .point,
  .fm-chart .area {
    fill: #000;
  }

  .fm-chart .bar.color6,
  .fm-chart .point.color6,
  .fm-chart .area.color6 {
    fill: #db843d;
  }

  .fm-chart .lines .line.color6 {
    strok: #db843d;
  }

  .fm-chart .bar.color5,
  .fm-chart .point.color5,
  .fm-chart .area.color5 {
    fill: #3d96ae;
  }

  .fm-chart .lines .line.color5 {
    stroke: #3d96ae;
  }

  .fm-chart .bar.color4,
  .fm-chart .point.color4,
  .fm-chart .area.color4 {
    fill: #80699b;
  }

  .fm-chart .line.color4 {
    stroke: #80699b;
  }

  .fm-chart .bar.color3,
  .fm-chart .point.color3,
  .fm-chart .area.color3 {
    fill: #89a54e;
  }

  .fm-chart .line.color3 {
    stroke: #89a54e;
  }

  .fm-chart .bar.color2,
  .fm-chart .point.color2,
  .fm-chart .area.color2 {
    fill: #aa4643;
  }

  .fm-chart .line.color2 {
    stroke: #aa4643;
  }

  .fm-chart .bar.color1,
  .fm-chart .point.color1,
  .fm-chart .area.color1 {
    fill: #4572a7;
  }

  .fm-chart .line.color1 {
    stroke: #4572a7;
  }

  .fm-chart.bar.vertical .axis.left .stroke,
  .fm-chart.bar.vertical .axis.left .tick,
  .fm-chart.bar.vertical .axis.right .stroke,
  .fm-chart.bar.vertical .axis.right .tick {
    display: none;
  }

  .fm-tooltip {
    text-align: center;
    padding: 5px 7px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    font-size: 13px;
  }
  ]]>
  </style>
  <g class='axis bottom'>
    <text x='744.791667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jan</text>
    <text x='684.375000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Feb</text>
    <text x='623.958333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Mar</text>
    <text x='563.541667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Apr</text>
    <text x='503.125000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >May</text>
    <text x='442.708333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jun</text>
    <text x='382.291667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jul</text>
    <text x='321.875000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Aug</text>
    <text x='261.458333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Sep</text>
    <text x='201.041667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Oct</text>
    <text x='140.625000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Nov</text>
    <text x='80.208333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Dec</text>
    <line x1='50.000000' y1='295.000000' x2='50.000000' y2='290.000000' class='tick' />
    <line x1='775.000000' y1='295.000000' x2='775.000000' y2='290.000000' class='tick' />
    <line x1='714.583333' y1='295.000000' x2='714.583333' y2='290.000000' class='tick' />
    <line x1='654.166667' y1='295.000000' x2='654.166667' y2='290.000000' class='tick' />
    <line x1='593.750000' y1='295.000000' x2='593.750000' y2='290.000000' class='tick' />
    <line x1='533.333333' y1='295.000000' x2='533.333333' y2='290.000000' class='tick' />
    <line x1='472.916667' y1='295.000000' x2='472.916667' y2='290.000000' class='tick' />
    <line x1='412.500000' y1='295.000000' x2='412.500000' y2='290.000000' class='tick' />
    <line x1='352.083333' y1='295.000000' x2='352.083333' y2='290.000000' class='tick' />
    <line x1='291.666667' y1='295.000000' x2='291.666667' y2='290.000000' class='tick' />
    <line x1='231.250000' y1='295.000000' x2='231.250000' y2='290.000000' class='tick' />
    <line x1='170.833333' y1='295.000000' x2='170.833333' y2='290.000000' class='tick' />
    <line x1='110.416667' y1='295.000000' x2='110.416667' y2='290.000000' class='tick' />
    <line x1='50.000000' y1='295.000000' x2='775.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis left'>
    <text x='40.000000' y='295.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >-10.0</text>
    <text x='40.000000' y='254.571429' style='text-anchor:end; dominant-baseline:middle;' class='label' >-2.86</text>
    <text x='40.000000' y='214.142857' style='text-anchor:end; dominant-baseline:middle;' class='label' >4.29</text>
    <text x='40.000000' y='173.714286' style='text-anchor:end; dominant-baseline:middle;' class='label' >11.4</text>
    <text x='40.000000' y='133.285714' style='text-anchor:end; dominant-baseline:middle;' class='label' >18.6</text>
    <text x='40.000000' y='92.857143' style='text-anchor:end; dominant-baseline:middle;' class='label' >25.7</text>
    <text x='40.000000' y='52.428571' style='text-anchor:end; dominant-baseline:middle;' class='label' >32.9</text>
    <text x='40.000000' y='12.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >40.0</text>
    <line x1='50.000000' y1='295.000000' x2='55.000000' y2='295.000000' class='tick' />
    <line x1='50.000000' y1='254.571429' x2='55.000000' y2='254.571429' class='tick' />
    <line x1='50.000000' y1='214.142857' x2='55.000000' y2='214.142857' class='tick' />
    <line x1='50.000000' y1='173.714286' x2='55.000000' y2='173.714286' class='tick' />
    <line x1='50.000000' y1='133.285714' x2='55.000000' y2='133.285714' class='tick' />
    <line x1='50.000000' y1='92.857143' x2='55.000000' y2='92.857143' class='tick' />
    <line x1='50.000000' y1='52.428571' x2='55.000000' y2='52.428571' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='55.000000' y2='12.000000' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='50.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='legend'>
    <text x='750.000000' y='22.000000' style='text-anchor:end; dominant-baseline:text-before-edge;' class='title' ></text>
    <circle cx='75.000000' cy='28.000000' r='3.000000' class='point color1' fm:label='' fm:series='', style=''></circle>
    <text x='83.000000' y='28.000000' style='text-anchor:start; dominant-baseline:central;' class='label' >Berlin</text>
  </g>
  <g class='lines'>
    <text x='744.791667' y='232.494000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >-0.9°C</text>
    <circle cx='744.791667' cy='243.494000' r='3.000000' class='point color1' fm:label='-0.9°C' fm:series='Berlin', style=''></circle>
    <text x='684.375000' y='224.004000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >0.6°C</text>
    <circle cx='684.375000' cy='235.004000' r='3.000000' class='point color1' fm:label='0.6°C' fm:series='Berlin', style=''></circle>
    <text x='623.958333' y='207.590000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >3.5°C</text>
    <circle cx='623.958333' cy='218.590000' r='3.000000' class='point color1' fm:label='3.5°C' fm:series='Berlin', style=''></circle>
    <text x='563.541667' y='179.856000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >8.4°C</text>
    <circle cx='563.541667' cy='190.856000' r='3.000000' class='point color1' fm:label='8.4°C' fm:series='Berlin', style=''></circle>
    <text x='503.125000' y='150.990000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >13.5°C</text>
    <circle cx='503.125000' cy='161.990000' r='3.000000' class='point color1' fm:label='13.5°C' fm:series='Berlin', style=''></circle>
    <text x='442.708333' y='131.180000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >17.0°C</text>
    <circle cx='442.708333' cy='142.180000' r='3.000000' class='point color1' fm:label='17.0°C' fm:series='Berlin', style=''></circle>
    <text x='382.291667' y='122.124000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >18.6°C</text>
    <circle cx='382.291667' cy='133.124000' r='3.000000' class='point color1' fm:label='18.6°C' fm:series='Berlin', style=''></circle>
    <text x='321.875000' y='126.086000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >17.9°C</text>
    <circle cx='321.875000' cy='137.086000' r='3.000000' class='point color1' fm:label='17.9°C' fm:series='Berlin', style=''></circle>
    <text x='261.458333' y='146.462000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >14.3°C</text>
    <circle cx='261.458333' cy='157.462000' r='3.000000' class='point color1' fm:label='14.3°C' fm:series='Berlin', style=''></circle>
    <text x='201.041667' y='176.460000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >9.0°C</text>
    <circle cx='201.041667' cy='187.460000' r='3.000000' class='point color1' fm:label='9.0°C' fm:series='Berlin', style=''></circle>
    <text x='140.625000' y='205.326000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >3.9°C</text>
    <circle cx='140.625000' cy='216.326000' r='3.000000' class='point color1' fm:label='3.9°C' fm:series='Berlin', style=''></circle>
    <text x='80.208333' y='221.740000' style='text-anchor:middle; dominant-baseline:text-after-edge;' class='label' >1.0°C</text>
    <circle cx='80.208333' cy='232.740000' r='3.000000' class='point color1' fm:label='1.0°C' fm:series='Berlin', style=''></circle>
    <path stroke-width='2.000000' class='line color1' style='' d='M744.791667 243.494000 L684.375000 235.004000 L623.958333 218.590000 L563.541667 190.856000 L503.125000 161.990000 L442.708333 142.180000 L382.291667 133.124000 L321.875000 137.086000 L261.458333 157.462000 L201.041667 187.460000 L140.625000 216.326000 L80.208333 232.740000 ' />
  </g>
</svg>
